<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Round Panel Test</title>
		<link rel="Stylesheet" href="roundshadow.css" type="text/css"/>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.roundshadow.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			//	$(".default").roundShadow();
			//	$(".default").textNodeWrap("<div></div>");
			//	$(".simple").roundShadow({theme:'simple'});
			});
		</script>
		<style type="text/css">
			.operation {
				position: fixed;
				top: 20px;
				left: 500px;
			}
		</style>
	</head>
	<body>
		<!--Position Test-->
		<div style="width:400px;position:fixed;top:10px;left:10px;outline:#000 solid 1px">
			<div class="default" style="width:360px;background-color:gray">
				Normal Panel(".default",use "default" method to decorate)
			</div>
			<div class="default" style="position:absolute;top:90px;left:20px;width:360px;background-color:yellow;">
				Absolute -- top:90px;left:20px(".default",use "default" method to decorate)
			</div>
			<div class="default" style="position:relative;top:120px;left:0px;width:360px;background-color:green;">
				Relative -- top:190px;left:0px(".default",use "default" method to decorate)
			</div>
			<div class="default" style="position:fixed;top:50px;left:20px;width:360px;background-color:blue;">
				Fixed -- top:50px;left:20px,on Panel's right-left(".default",use "default" method to decorate)
			</div>
		</div>
		<!--Nest Test-->
		<div style="width:400px;position:fixed;top:280px;left:400px;outline:#ff0000 solid 1px">
			<div class="nest" style="position:absolute;top:10px;left:10px;background-color:gray">
				Nest Panel's parent(".nest",use "default" method to decorate)
				<div class="nest" style="background-color:green">
					Child
					<div class="nest" style="background-color:red">Child's Child</div>
				</div>
				<div class="nest" style="background-color:blue">
					Child's Brother
				</div>
			</div>
		</div>
		<!--Simple Test-->
		<div style="position:fixed;top:100px;left:450px;outline:#000000 solid 1px">
			<div class="simple" style="outline:#ff0000 solid 1px;">
				<div>This panel use "simple" to decorate</div>
				<div>&nbsp;</div>
				<div class="simple" style="outline:#00ff00 solid 1px;position:absolute;top:20px;">
					Absolute Panel(child) -- top:20px;
				</div>
			</div>
			<div>&nbsp;</div>
			<div class="simple" style="outline:#0000ff solid 1px;">
				This panel also use "simple" to decorate
			</div>
		</div>
		<div class="css" style="outline:#000000 solid 1px;position:fixed;top:280px;left:840px">
			This Panel use "css" to decorate
			<div class="css" style="background-color:gray">Child</div>
		</div>
		<div class="operation">
			<input type="button" onclick="$('.default').roundShadow().each(function(){/*alert($(this).parent());*/});" value="Panel '.default'">
			<input type="button" onclick="$('.nest').roundShadow();" value="Panel '.nest'">
			<input type="button" onclick="$('.simple').roundShadow({theme:'simple'})" value="Simple Panel '.simple'">
			<input type="button" onclick="$('.css').roundShadow({theme:'css'})" value="CSS Panel '.css'">
		</div>
	</body>
</html>